<template>
  <div class="container">
    <div class="tips-box">
      <p class="title">尊敬的{{ data.info.borrower }}先生/女士：</p>
      <p class="text">请核对以下资料是否准备齐全，拍照上传对应资料详情页，根据您的资料收集实际情况，每次可保存最少一种资料。</p>
    </div>
    <div class="content">
      <p class="title">您需要确认以下资料准备齐全并上传，方可出现场。</p>
      <p class="title-Highlight">您需要确认以下资料准备齐全并上传，方可出现场。</p>
      <div class="attachments-item" v-for="(item,index) in data.attachmentsList">
        <div class="attachments-b">
          <img class="attachments-icon" :src="item.state?data.iconState.xz:data.iconState.wxz" alt="">
          <div>
            <span class="title">{{ item.title }}</span>
            <span class="state" v-if="item.state">已上传</span>
            <p class="up-time" v-if="item.state">{{ item.time }}</p>
          </div>

        </div>
        <div class="info-box">
          <div class="fujian" v-if="item.state">
            <img class="fujian-img"
                 :src="item.imgs[0]?item.imgs[0].showUrl:''"
                 alt="" @click="showImg(item.imgs)">
            <img @click="deleteFJImg(item.imgs[0],index)" class="del-icon" src="../assets/images/del-icon.png" alt="">
          </div>
<!--          capture="camera"-->
          <van-uploader @click="data.tyep=item.type" :after-read="afterRead">
            <div class="shancghuan">{{item.type==10?'照片上传':'详情页上传'}}</div>
          </van-uploader>

        </div>
      </div>
      <van-cell-group inset>
        <van-field class="textarea" type="textarea" v-model="data.info.note" label="备注" placeholder="请输入..."/>
      </van-cell-group>
      <p class="tips-text">请确保资料真实有效，如有疑问请致电您的客户经理</p>
      <div class="sub-btn" @click="submit">确认提交</div>
    </div>
  </div>

  <!--  弹窗-->
  <div class="layer-box" v-if="data.isshowLayer">
    <div class="layer-con">
      <img v-if="data.isCommit" src="../assets/images/cg.png" class="icon-t" alt="">
      <img v-else src="../assets/images/ts.png" class="icon-t" alt="">
      <p v-if="data.isCommit" class="text-tips">提交成功！</p>
      <p v-else class="text-tips">您资料还未上传齐全，请上传后 再次提交！</p>
      <div v-if="data.isCommit" class="btn" @click="data.isshowLayer=false;data.isCommit=false">知道了</div>
      <div v-else class="btn" @click="data.isshowLayer=false">确定</div>
    </div>
  </div>

</template>

<script setup>
import {reactive, onMounted} from 'vue';
import xz from '../assets/images/xz-icon.png';
import wxz from '../assets/images/wxz-icon.png';
import {getPrepare, getOssOrder, addImg, deleteImg, commit} from '../assets/js/api.js';
import axios from "axios";
import {showToast, showImagePreview} from 'vant';
// 1	身份证
// 2	房产证
// 3	征信报告
// 4	户口本
// 5	婚姻证明
// 6	房屋一抵借款、抵押合同
// 7	工作证明/社保缴存记录
// 8	银行流水
// 9	购房合同或完税证明


const data = reactive({
  checked: ['a'],
  iconState:
      {
        xz,
        wxz
      },
  attachmentsList: [
    {
      title: '身份证 复印件',
      type: 1,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '房产证 复印件',
      type: 2,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '最新征信报告 原件',
      type: 3,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '户口本 复印件',
      type: 4,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '婚姻证明 复印件',
      type: 5,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '房屋一抵借款、 抵押合同',
      type: 6,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '工作证明/社保 缴存记录 原件',
      type: 7,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '银行流水 原件',
      type: 8,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '购房合同或 完税证明 复印件',
      type: 9,
      state: false,
      time: '',
      imgs: [],
    }, {
      title: '手执身份证和 融立告知书拍照 ',
      type: 10,
      state: false,
      time: '',
      imgs: [],
    },
  ],
  value: '',
  id: '',
  info: {},
  type: '',
  list: [],
  isshowLayer: false,
  isCommit: false,

});
onMounted(() => {
  var url = window.location.href;
  data.id = url.split('?sid=')[1];
  getInfo();
})

//预览图片
function showImg(imgs) {
  let imgList = imgs.map(item => {
    return item.showUrl;
  })
  showImagePreview(imgList);
}

//提交
function submit() {
  let count = 0;
  data.attachmentsList.forEach((item) => {
    if (item.type <= 4 && item.imgs.length > 0) {
      count++
    }
  })
  data.isshowLayer = true;
  if (count >= 4) {
    data.isCommit = true;
    commit({sid: data.id, note: data.info.note}).then(res => {

    })
  }


}

//删除附件
function deleteFJImg(item, index) {
  deleteImg(item.id).then(res => {
    data.attachmentsList[index].imgs.shift();
    if (data.attachmentsList[index].imgs.length <= 0) {
      data.attachmentsList[index].state = false;
    }
  })
}

//传给服务器
function addAttachmentsImg(url, showName) {
  let params = {
    sid: data.id,
    url,
    type: data.tyep,
    showName,
  }

  addImg(params).then(res => {
    getInfo();

  })

}

//上传图片
function uploadImg(file) {
  //获取oss
  getOssOrder().then((res) => {
    let dataOss = res.data;
    let imgName = file.name;
    let wz = imgName.split(".");
    let imgType = "." + wz[wz.length - 1];
    let ossUrl = dataOss.host;
    let formData = new FormData();
    //表头信息
    let config = {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    };
    formData.append("policy", dataOss.policy);
    formData.append("key", dataOss.dir + dataOss.fileName + imgType);
    formData.append("OSSAccessKeyId", dataOss.accessid);
    formData.append("Signature", dataOss.signature);
    formData.append("success_action_status", 200);
    formData.append("fileName", dataOss.fileName);
    formData.append("file", file);
    // console.log(formData.file)
    axios.post(ossUrl, formData, config).then(res => {
      if (res.status == 200) {
        addAttachmentsImg(dataOss.fileName, imgName);
      } else {
        showToast(res.statusText);
      }

    })
  })
}

function afterRead(file) {
  uploadImg(file.file);
}

//获取信息
function getInfo() {
  getPrepare({params: {sid: data.id}}).then(res => {
    data.info = res.data;
    data.list = res.data.attachmentList;
    let keys = Object.keys(res.data.attachmentList);
    data.attachmentsList.map(item => {
      keys.map((i) => {
        if (item.type == i) {
          item.state = true;
          item.time = data.list[i][0].updateTime
          item.imgs = data.list[i];
        }
      })
    })
  })
}
</script>

<style scoped lang="less">
.container {
  background-color: #F8F8F8;
  min-height: 100vh;

  .tips-box {
    padding: 10px 15px 20px;
    background-color: #ffffff;
    margin-bottom: 25px;

    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-bottom: 16px;
    }

    .text {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      text-indent: 28px;
      line-height: 26px;
    }
  }

  .content {
    padding: 0 15px;

    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-bottom: 11px;


    }
    .title-Highlight{
      margin-bottom: 16px;
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #D13232;
    }

    .attachments-item {
      margin-bottom: 10px;
      padding: 18px 10px 15px;
      //height: 65px;
      background: #FFFFFF;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .attachments-b {
        display: flex;

      }

      .attachments-icon {
        width: 14px;
        height: 14px;
        margin-right: 6px;
        margin-top: 5px;
      }

      .title {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        //display: inline-block;
        //width: 120px;
      }

      .state {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFA42F;
        display: inline-block;
        margin-left: 7px;
      }

      .up-time {
        //margin-left: 20px;
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }

      .info-box {
        display: flex;
        align-items: center;

        .fujian {
          width: 40px;
          height: 30px;
          border-radius: 3px;
          position: relative;
          margin-right: 10px;

          .fujian-img {
            width: 100%;
            height: 100%;
            border-radius: 3px;
          }

          .del-icon {
            position: absolute;
            width: 10px;
            height: 10px;
            top: 0;
            right: 0;
          }
        }
      }

      .shancghuan {
        width: 69px;
        height: 23px;
        border: 1px solid #28B779;
        border-radius: 3px;
        background: rgba(40, 183, 121, 0.1);
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #28B779;
        line-height: 23px;
        text-align: center;
      }
    }

    .tips-text {
      text-align: center;
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      margin: 25px 0 15px;
    }

    .sub-btn {
      width: 100%;
      height: 49px;
      background: linear-gradient(90deg, #2977F5 0%, #238FF8 100%);
      box-shadow: 0px 7px 26px 1px rgba(41, 122, 246, 0.25);
      border-radius: 25px;
      text-align: center;
      line-height: 49px;
      color: #FFFFFF;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-bottom: 35px;
    }
  }

}

.van-cell-group--inset {
  margin: 0;
}

.textarea .van-field__label {
  width: auto !important;
}

.layer-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;

  .layer-con {
    width: 305px;
    height: 240px;
    background: #FFFFFF;
    border-radius: 10px;
    text-align: center;
    padding: 0 32px;

    .icon-t {
      width: 59px;
      height: 59px;
      margin-top: 31px;
    }

    .text-tips {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .btn {
      width: 100%;
      height: 44px;
      background: linear-gradient(90deg, #2977F5 0%, #238FF8 100%);
      border-radius: 22px;
      text-align: center;
      line-height: 44px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      margin-top: 23px;
    }
  }
}

</style>